<template>
  <div>
    <div class="searchBox">
      <span>{{ label }}:</span>
      <div :class="!value?'searchItem active':'searchItem'" @click="$emit('input',undefined)">全部</div>
      <div :class="value==item.value?'searchItem active':'searchItem'" @click="$emit('input',item.value)"
           v-for="(item,index) in selectOptions" :key="index">{{ item.label }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["value", "label", "selectOptions"],
}
</script>

<style scoped lang="scss">
.active {
  background: #e9f9f9;
  border-color: #d0f3f4;
  color: #13c2c2;
}

.searchBox {
  display: flex;
  align-items: center;

  span {
    color: #a7b5b5;
    display: block;
    width: 85px;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
  }

  .searchItem {
    height: 29px;
    line-height: 29px;
    border-radius: 4px;
    margin-right: 10px;
    padding: 0 8px;
    color: gray;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
  }
}
</style>
